<template>
  <base-container>
    <div class="p-[24px] rounded-[12px] content">
      <div class="flex items-center text-[18px] font-bold text-var(--ct1) mb-[24px]">
        <img alt="" class="w-[19px] h-[19px] mr-[10px]" src="../../assets/application/img_title_dot.png" />
        <text class="text-[18px]">你已开通以下应用</text>
      </div>

      <div v-if="applicationList.length > 0">
        <div class="card-container">
          <div v-for="item in applicationList" :key="item.serviceId" class="card">
            <div class="flex justify-between mb-15px">
              <div>
                <div class="font-500 text-16px mb-10px">{{ item.serviceName }}</div>
                <div class="font-400 text-12px text-#6B678E mb-10px">{{ item.description }}</div>
                <div class="font-400 text-12px text-#6B678E h-20px">
                  <span v-if="item.smsPackage"
                    >当前可用：<text class="text-#5947F1 text-14px font-500">{{ item.tenantFee }}</text></span
                  >
                </div>
              </div>
              <div>
                <img :src="item.logoUrl" alt="" class="w-48px h-48px rounded-12px" />
              </div>
            </div>
            <div class="flex justify-between items-center h-30px mt-auto">
              <div v-if="item.smsPackage" class="font-500 text-16px text-#5947F1">
                {{ item.smsPackage.substring(0, item.smsPackage.indexOf("/"))
                }}<text class="font-400 text-12px">{{ item.smsPackage.substring(item.smsPackage.indexOf("/")) }}</text>
              </div>
              <div v-else class="font-500 text-16px text-#5947F1">
                ¥ {{ item.tenantFee }}<text class="font-400 text-12px">/次</text>
              </div>
              <div v-if="item.showBuy"><el-button :dark="isDark" color="#5947F1">购买</el-button></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </base-container>
</template>

<script setup>
  const { userInfo } = useUserInfoStore();
  console.info("userInfo", userInfo);
  const applicationList = ref([]); // 应用
  onMounted(async () => {
    await Api.application.getServiceInfo({ tenantId: userInfo.tenantId }).then(res => {
      if (res.code === "200") {
        applicationList.value = res.data;
      }
    });
  });
</script>
<style lang="scss" scoped>
  .content {
    height: 100%;
    background: linear-gradient(175deg, var(--bd9) 1%, var(--fl7) 4%);
    border: 1px solid #ffffff;
    .shaft {
      position: relative;
      padding-left: 10px;
    }
    .shaft::before {
      content: "";
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      width: 3px;
      height: 16px;
      background-color: #5947f1;
      border-radius: 4px;
    }
    .card-container {
      margin-top: 16px;
      display: flex;
      flex-wrap: wrap;
      gap: 16px;
      .card {
        flex: 0 0 calc(25% - 12px);
        display: flex;
        flex-direction: column;
        box-sizing: border-box;
        padding: 16px;
        background: linear-gradient(180deg, #f7f7f9 0%, #fff 28.37%);
        border-radius: 8px;
        border-bottom: 1px solid #ecebf1;
      }
    }
  }
</style>
